<template>
  <el-form>
    <el-form-item label="一级分类">
      <el-select
        v-model="selectOneVal"
        placeholder="Select"
        size="large"
        @change="selectOneChange"
      >
        <el-option
          v-for="item in userTraitState.oneCategory"
          :key="item.id"
          :value="item.id"
          :label="item.name"
        />
      </el-select>
    </el-form-item>
    <el-form-item label="二级分类">
      <el-select
        v-model="selectTwoVal"
        placeholder="Select"
        size="large"
        :disabled="!selectOneVal"
        @change="selectTwoChange"
      >
        <el-option
          v-for="item in userTraitState.twoCategory"
          :key="item.id"
          :value="item.id"
          :label="item.name"
        />
      </el-select>
    </el-form-item>
    <el-form-item label="三级级分类">
      <el-select
        v-model="selectThreeVal"
        :disabled="!selectTwoVal"
        placeholder="Select"
        size="large"
        @change="selectThreeChange"
      >
        <el-option
          v-for="item in userTraitState.threeCategory"
          :key="item.id"
          :value="item.id"
          :label="item.name"
        />
      </el-select>
    </el-form-item>
  </el-form>
</template>

<script setup lang="ts">
/* 冲仓库获取分类列表 */
import { userGoodsTrait } from '@/store/goods/trait.js'
/* spu仓库 */
import { userSpuState } from '@/store/goods/spu'
import { onMounted, ref, watch } from 'vue'
/* 获取分类 */
const userTraitState = userGoodsTrait()
/* Spu模块仓库 */
const userSpu = userSpuState()
/* 界面熏染完成调用周期函数获取一级分类 */
onMounted(() => userTraitState.getOneCategoryList())
/* selece选择器选中的值 */
const selectOneVal = ref('')
const selectTwoVal = ref('')
const selectThreeVal = ref('')
/* 一级select选中的值发生变化时触发 */
const selectOneChange = (val: string) => {
  /* 判断是否已经取到 一级分类 id  如果已经取代一级分类ID 就发起请求获取二级分类*/
  if (!val) return
  /* 已经取到 发起请求获取二级分类 */
  userTraitState.oneCategoryId = val
  userTraitState.getTwoCategoryList(val)
}
/* 二级select选中的值发生变化时触发 */
const selectTwoChange = (val: string) => {
  /* 判断是否已经取到 二级分类 id  如果已经取代一级分类ID 就发起请求获取三级分类*/
  if (!val) return
  /* 已经取到 发起请求获取二级分类 */
  userTraitState.twoCategoryId = val
  userTraitState.getThreeCategoryList(val)
}
/* 三级select选中的值发生变化时触发 */
const selectThreeChange = (val: string) => {
  /* 判断是否已经取到 三级分类 id  如果已经取代一级分类ID 就发起请求获取已有属性*/
  if (!val) return
  /* 已经取到 发起请求获取二级分类 */
  userTraitState.threeCategoryId = val
  userSpu.toggleTable = '0'
  userTraitState.updateTitTrait.categoryId = val
  userTraitState.getAllTrait(
    userTraitState.oneCategoryId,
    userTraitState.twoCategoryId,
    userTraitState.threeCategoryId,
  )
}

/* 侦听一级select的变化 */
watch(
  () => selectOneVal.value,
  () => {
    selectTwoVal.value = ''
    selectOneChange(selectOneVal.value)
  },
)
/* 侦听二级select的变化 */
watch(
  () => selectTwoVal.value,
  () => {
    userTraitState.threeCategoryId = ''
    selectThreeVal.value = ''
    selectTwoChange(selectTwoVal.value)
  },
)
</script>

<style scoped lang="scss">
.el-form {
  @include flexible(center);
  .el-form-item {
    flex: 1;
  }
}
</style>
